<template>
    <lemon-common uri="user" :sort="sort" ref="commonRef" :search-form-model="searchFormModel" :search-form-item="searchFormItem" :search-condition="searchCondition" :table-item="tableItem" :dialog-info-form-model="dialogInfoFormModel" :dialog-info-form-item="dialogInfoFormItem" :dialog-edit-form-model="dialogEditFormModel" :dialog-edit-form-item="dialogEditFormItem" :dialog-add-form-model="dialogAddFormModel" :dialog-add-form-item="dialogAddFormItem" dialog-form-label-width="100px" @on-add="getSelect" @on-edit="getSelect" @on-info="getSelect"></lemon-common>
</template>

<script setup lang="ts">
import { reactive, h, inject, ref } from "vue";
import LemonImage from "@/components/LemonImage.vue";
import LemonTag from "@/components/LemonTag.vue";
import { getNameById } from "@/utils/city";
import { statusOptions, statusFormat, genderOptions, genderFormat } from "@/utils/common";

//获取自定义全局方法
const { http, rule } = inject<any>("method");

//公共组件ref
const commonRef: any = ref(null);

//排序规则
const sort = reactive({ desc: ["createTime"] });

//角色列表
const roleOptions = ref<any[]>([]);

//年级班级职位列表
const gradeClassJobOptions = ref<any[]>([]);

//搜索的form
const searchFormModel = reactive({
    username: "",
    name: "",
    phone: "",
    email: "",
    status: null,
});

//搜索form子项
const searchFormItem = reactive({
    username: { label: "用户名", type: "input" },
    name: { label: "姓名", type: "input" },
    phone: { label: "手机号", type: "input" },
    email: { label: "邮箱", type: "input" },
    status: { label: "状态", type: "select", options: statusOptions },
});

//搜索的条件
const searchCondition = reactive({
    username: "like",
    name: "like",
    phone: "like",
    email: "like",
});

//表格每一项
const tableItem = reactive([
    { prop: "username", label: "用户名", minWidth: "150" },
    { prop: "name", label: "姓名", minWidth: "150" },
    { prop: "phone", label: "手机号", minWidth: "150" },
    { prop: "sex", label: "性别", minWidth: "80", formatter: genderFormat },
    { prop: "email", label: "邮箱", minWidth: "200" },
    { prop: "birthday", label: "生日", minWidth: "150" },
    {
        prop: "avatar",
        label: "头像",
        minWidth: "80",
        formatter: (row: any, column: any) => h(LemonImage, { src: row[column.property], style: { width: "40px", height: "40px" } }, () => "头像"),
    },
    {
        prop: "address",
        label: "地址",
        minWidth: "200",
        formatter: (row: any, column: any) => {
            let value = "";
            if (row?.provinceId) {
                value += getNameById(row.provinceId) + " ";
            }
            if (row?.cityId) {
                value += getNameById(row.cityId) + " ";
            }
            if (row?.countyId) {
                value += getNameById(row.countyId) + " ";
            }
            return value + row[column.property];
        },
    },
    { prop: "prevLoginIp", label: "上次登录的IP", minWidth: "150" },
    { prop: "prevLoginTime", label: "上次登录的时间", minWidth: "200" },
    { prop: "createBy", label: "创建人", minWidth: "150" },
    { prop: "createTime", label: "创建时间", minWidth: "200" },
    { prop: "updateBy", label: "修改人", minWidth: "150" },
    { prop: "updateTime", label: "修改时间", minWidth: "200" },
    { prop: "status", label: "状态", minWidth: "100", formatter: statusFormat },
    {
        prop: "roleNameList",
        label: "角色",
        minWidth: "200",
        formatter: (row: any, column: any) => {
            const property = row[column.property];
            if (property && property.length > 0) {
                return h(LemonTag, { value: property }, () => "角色");
            }
        },
    },
    {
        prop: "gradeClassJobNameList",
        label: "班级&职位",
        minWidth: "200",
        formatter: (row: any, column: any) => {
            const property = row[column.property];
            if (property && property.length > 0) {
                return h(LemonTag, { value: property }, () => "班级&职位");
            }
        },
    },
]);

//弹出框详情form
const dialogInfoFormModel = reactive({
    username: "",
    name: "",
    phone: "",
    sex: null,
    email: "",
    birthday: null,
    avatar: "",
    provinceId: null,
    cityId: null,
    countyId: null,
    address: "",
    prevLoginIp: "",
    prevLoginTime: "",
    createBy: "",
    createTime: null,
    updateBy: "",
    updateTime: null,
    status: null,
    roleIdList: [],
    gradeClassJobIdList: [],
});

//弹出框详情form子项
const dialogInfoFormItem = reactive({
    username: { label: "用户名", type: "input", readonly: true },
    name: { label: "姓名", type: "input", readonly: true },
    phone: { label: "手机号", type: "input", readonly: true },
    sex: { label: "性别", type: "select", options: genderOptions, readonly: true },
    email: { label: "邮箱", type: "input", readonly: true },
    birthday: { label: "生日", type: "input", readonly: true },
    avatar: { label: "头像", type: "image-upload", uploadUrl: "uploadCurrentUserAvatar", maxSize: "2mb", readonly: true },
    countyId: { label: "城市", type: "city", readonly: true },
    address: { label: "地址", type: "input", readonly: true },
    prevLoginIp: { label: "上次登录", type: "input", readonly: true },
    prevLoginTime: { label: "上次登录", type: "input", readonly: true },
    createBy: { label: "创建人", type: "input", readonly: true },
    createTime: { label: "创建时间", type: "datetime", readonly: true },
    updateBy: { label: "修改人", type: "input", readonly: true },
    updateTime: { label: "修改时间", type: "datetime", readonly: true },
    status: { label: "状态", type: "select", options: statusOptions, readonly: true },
    roleIdList: { label: "角色", type: "select", options: roleOptions, multiple: true, readonly: true },
    gradeClassJobIdList: {
        label: "班级&职位",
        type: "cascader",
        options: gradeClassJobOptions,
        cascaderProps: { multiple: true, expandTrigger: "hover", checkStrictly: true },
        readonly: true,
    },
});

//弹出框编辑form
const dialogEditFormModel = reactive({
    id: null,
    username: "",
    name: "",
    phone: "",
    sex: null,
    email: "",
    birthday: null,
    avatar: "",
    provinceId: null,
    cityId: null,
    countyId: null,
    address: "",
    status: null,
    roleIdList: [],
    gradeClassJobIdList: [],
});

//弹出框编辑form子项
const dialogEditFormItem = reactive({
    username: { label: "用户名", type: "input", rules: rule.require.input("用户名") },
    name: { label: "姓名", type: "input", rules: rule.require.input("姓名") },
    phone: { label: "手机号", type: "input", rules: rule.phone("手机号") },
    sex: { label: "性别", type: "select", options: genderOptions, rules: rule.require.select("性别") },
    avatar: { label: "头像", type: "image-upload", uploadUrl: "uploadCurrentUserAvatar", maxSize: "2mb" },
    email: { label: "邮箱", type: "input", rules: rule.email() },
    birthday: { label: "生日", type: "date", rules: rule.require.select("生日") },
    countyId: { label: "城市", type: "city", rules: rule.require.select() },
    address: { label: "地址", type: "input", rules: rule.require.input("地址") },
    status: { label: "状态", type: "select", options: statusOptions, rules: rule.require.select("状态") },
    roleIdList: { label: "角色", type: "select", options: roleOptions, multiple: true, rules: rule.require.input("角色") },
    gradeClassJobIdList: {
        label: "班级&职位",
        type: "cascader",
        options: gradeClassJobOptions,
        cascaderProps: { multiple: true, expandTrigger: "hover", checkStrictly: true },
        rules: rule.require.input("班级&职位"),
    },
});

//弹出框编辑form
const dialogAddFormModel = reactive({
    username: "",
    name: "",
    phone: "",
    sex: null,
    avatar: "",
    email: "",
    birthday: null,
    provinceId: null,
    cityId: null,
    countyId: null,
    address: "",
    status: 1,
    roleIdList: [],
    gradeClassJobIdList: [],
});

//弹出框编辑form子项
const dialogAddFormItem = reactive({
    username: { label: "用户名", type: "input", rules: rule.require.input("用户名") },
    name: { label: "姓名", type: "input", rules: rule.require.input("姓名") },
    phone: { label: "手机号", type: "input", rules: rule.phone("手机号") },
    sex: { label: "性别", type: "select", options: genderOptions, rules: rule.require.select("性别") },
    avatar: { label: "头像", type: "image-upload", uploadUrl: "uploadCurrentUserAvatar", maxSize: "2mb" },
    email: { label: "邮箱", type: "input", rules: rule.email() },
    birthday: { label: "生日", type: "date", rules: rule.require.select("生日") },
    countyId: { label: "城市", type: "city", rules: rule.require.select() },
    address: { label: "地址", type: "input", rules: rule.require.input("地址") },
    status: { label: "状态", type: "select", options: statusOptions, rules: rule.require.select("状态") },
    roleIdList: { label: "角色", type: "select", options: roleOptions, multiple: true, rules: rule.require.input("角色") },
    gradeClassJobIdList: {
        label: "班级&职位",
        type: "cascader",
        options: gradeClassJobOptions,
        cascaderProps: { multiple: true, expandTrigger: "hover", checkStrictly: true },
        rules: rule.require.input("班级&职位"),
    },
});

//查询选择的对象
const getSelect = async () => {
    const data = await http.get("/user/findSelect");
    roleOptions.value = data.roleList;
    gradeClassJobOptions.value = data.gradeClassJobList;
};
</script>

<style scoped lang="less"></style>
